/*
 * @Description: 
 * @Author: handongliang dongliang.han@12301.cn
 * @Date: 2023-09-15 14:33:57
 * @LastEditTime: 2023-12-01 15:45:08
 */
import './index.less';

const RankingBar: React.FC<any> = (props) => {
    const {
        data = [],
        bgColor = '',
        labelFormatter,
        valueFormatter,
        orient = 'horizontal',
        unit,
        barStyle,
        total,
        contentStyle = {},
        className = ''
    } = props;

    return (
        <div className={`ranking-bar ranking-bar--${orient} ${className}`}>
            {data.map((item: any) =>
                <div className='ranking-bar-item' key={item.name + "_" + item.value}>
                    <div className='ranking-bar-content' style={contentStyle}>
                        <div className='ranking-bar-content--name'>
                            {labelFormatter ? labelFormatter(item) : item.name}
                        </div>
                        <div className='ranking-bar-content--value'>
                            {
                                valueFormatter ? valueFormatter(item) : total ? ((item.value * 100) / total).toFixed(2)+"%" : 0 + '%'
                            }
                            <span>{unit ? unit : ""}</span>
                        </div>
                    </div>
                    <div className='ranking-bar-chart' style={barStyle}>
                        {
                            total ? <div className='ranking-bar-chart--process' style={{
                                width: `${((item.value * 100) / total).toFixed(2)}%`,
                                background: `${bgColor}`,
                            }}></div> : null
                        }

                    </div>
                </div>
            )}
        </div>
    )
}
export default RankingBar